<template>
    <div>
        <PageTitle :title="form.id ? '编辑轮播图' : '新增轮播图'"></PageTitle>
        <Form ref="form" :model="form" :rules="rules" :label-width="80">
            <FormItem label="标题" prop="title">
                <Input v-model="form.title" style="width: 260px;" />
            </FormItem>
            <FormItem label="图片" prop="img">
                <ImageUpload v-model="form.img"></ImageUpload>
            </FormItem>
            <FormItem label="主题色" prop="colour">
                <ColorPicker v-model="form.colour" />
            </FormItem>
            <FormItem label="关联项目">
                <Button type="info" @click="handleOpenModal">选择项目</Button>
                <div style="margin-top: 10px;">
                    <Table border :columns="columns" :data="selectProject"></Table>
                </div>
            </FormItem>
            <Row :gutter="20">
                <Col span="5">
                    <FormItem label="排序">
                        <InputNumber v-model="form.sort" :min="1" :max="100" :step="1" style="width: 100px;" /></InputNumber>
                    </FormItem>
                </Col>
                <Col span="10">
                    <div style="margin-top: 5px; color: #ccc">排序越小越靠前</div>
                </Col>
            </Row>
            <FormItem label="状态" prop="status">
                <RadioGroup v-model="form.status">
                    <Radio :label="1">启用</Radio>
                    <Radio :label="0">禁用</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
                <Button :disabled="submiting" @click="handleCancel" style="margin-left: 10px;">返回</Button>
            </FormItem>
        </Form>
        <Modal
            v-model="showModal"
            title="选择项目"
            width="1200px"
            @on-cancel="handleCancelSelect"
        >
            <ProjectSelect ref="project" :value="selectProject"></ProjectSelect>
            <div slot="footer">
                <Button @click="handleCancelSelect">取消</Button>
                <Button type="primary" @click="handleSelect">提交</Button>
            </div>
        </Modal>
        <Spin size="large" fix v-if="isLoading"></Spin>
    </div>
</template>

<script>
import TableRows from '@/components/utils/table-rows.vue';
import ImageUpload from '@/components/form/image-upload.vue';
import ProjectSelect from '@/components/selector/project-select.vue';
export default {
    components: {
        TableRows,
        ImageUpload,
        ProjectSelect
    },
    data() {
        return {
            submiting: false,
            isLoading: false,
            showModal: false,
            selectProject: [],
            form: {
                id: '',
                title: '',
                img: null,
                colour: '#ce2d19',
                project_id: null,
                sort: 100,
                status: 1
            },
            rules: {
                title: [
                    {required: true, message: '请输入轮播标题', trigger: 'blur'}
                ],
                img: [
                    {required: true, message: '请上传轮播图片', trigger: 'change'}
                ]
            },
            columns: [
            	{
                    title: '基本信息',
                    minWidth: 250,
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.img || '/static/images/default_avatar.png'
                            }
                        }, [
                            h('p',params.row.name),
                            h('p',[
                                h('span',{style:{color:'green'}}, params.row.category ? '#'+params.row.category.name : ''),
                                h('span',{style:{color:'red',marginLeft:'5px'}},params.row.tour ? '#'+params.row.tour.name : '')
                            ])
                        ])
                    }
                },
                {
                    title: '票面价',
                    minWidth: 50,
                    render: (h, params) => {
                        return h("span", {}, params.row.min_price +'起');
                    }
                },
                {
                    title: '服务商价',
                    minWidth: 50,
                    render: (h, params) => {
                        return h("span", {}, params.row.partner_min_price +'起');
                    }
                },
                {
                    title: '库存',
                    maxWidth: 80,
                    key: 'stocks'
                },
                {
                    title: '已售',
                    maxWidth: 80,
                    key: 'sales'
                },
                {
                    title: '演出时间',
                    minWidth: 100,
                    render: (h, params) => {
                        return h('div', [
                            h('p',params.row.show_start_at + '至'), 
                            h('p',params.row.show_end_at)
                        ])
                    }
                },
                {
                    title: '上架状态',
                    width: 84,
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.row.shelf_status == 1 ? '上架' : '下架');
                    }
                },
                {
                    title: '操作',
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                size: 'small',
                                type: 'error'
                            },
                            on: {
                                click: () => {
                                    this.selectProject.splice(params.index, 1);
                                    this.form.project_id = null;
                                }
                            }
                        }, '删除');
                    }
                }
            ]
        }
    },
    mounted() {
        if(this.$route.query.id) {
            this.form.id = this.$route.query.id;
            this.handleGetDetail();
        }
    },
    methods: {
        handleGetDetail() {
            this.isLoading = true;
            this.$ajax.get('/common/banner/read/'+this.form.id).then(res => {
                this.form.title = res.title;
                this.form.img = res.img;
                this.form.colour = res.colour || '';
                this.form.project_id = res.project_id;
                this.form.sort = res.sort;
                this.form.status = res.status;
                this.selectProject = res.project ? [res.project] : [];
                this.isLoading = false;
            }).catch(err => {
                this.$Message.error(err.message || '加载失败');
            })
        },
        handleOpenModal() {
            this.$refs.project.init();
            this.showModal = true;
        },
        handleSelect() {
            let res = this.$refs.project.getCheckeds();
            this.selectProject = res;
            this.form.project_id = res[0].id;
            this.handleCancelSelect();
        },
        handleCancelSelect() {
            this.$refs.project.clear();
            this.showModal = false;
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        title: form.title,
                        img: form.img,
                        colour: form.colour,
                        project_id: form.project_id || 0,
                        sort: form.sort,
                        status: form.status
                    }
                    this.submiting = true;
                    if (form.id) {
                        this.$ajax.put('/common/banner/update/'+form.id, params).then(res => {
                            this.$Message.success('编辑成功');
                            this.handleCancel();
                        }).catch(err => {
                            this.submiting = false;
                            this.$Message.error(err.message || '提交失败');
                        })
                    }else{
                        this.$ajax.post('/common/banner/save', params).then(res => {
                            this.$Message.success('添加成功');
                            this.handleCancel();
                        }).catch(err => {
                            this.submiting = false;
                            this.$Message.error(err.message || '提交失败');
                        })
                    }
                }
            })
        },
        handleCancel() {
            this.$router.back();
        }
    }
}
</script>